<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>胖头鱼的个人博客 | 后台管理</title>

    <link rel="stylesheet" th:href="@{/my/css/reset.css}">
    <link rel="stylesheet" th:href="@{/element-ui/css/element-ui.css}">

    <link rel="stylesheet" th:href="@{/my/css/admin/fragment.css}">
    <link rel="stylesheet" th:href="@{/my/css/admin/index.css}">

</head>
<body>

<div id="app">
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="200px">
                <el-row class="tac">
                    <el-col :span="24">
                        <el-menu
                                default-active="1"
                                class="el-menu-vertical-demo"
                                background-color="transparent">
                            <el-menu-item index="1" @click="home">
                                <i class="el-icon-s-home"></i>
                                <span slot="title">进入首页</span>
                            </el-menu-item>
                            <el-menu-item index="2" @click="list">
                                <i class="el-icon-folder-checked"></i>
                                <span slot="title">博文列表</span>
                            </el-menu-item>
                            <el-menu-item index="3" @click="add">
                                <i class="el-icon-circle-plus-outline"></i>
                                <span slot="title">添加博文</span>
                            </el-menu-item>
                            <el-menu-item index="4" @click="time">
                                <i class="el-icon-plus"></i>
                                <span slot="title">添时间线</span>
                            </el-menu-item>
                            <el-menu-item index="5" @click="change">
                                <i class="el-icon-unlock"></i>
                                <span slot="title">修改密码</span>
                            </el-menu-item>
                            <el-menu-item index="6" @click="logout">
                                <i class="el-icon-switch-button"></i>
                                <span slot="title">注销登录</span>
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <el-main>
                <div class="top">
                    <el-card>
                        <div>
                            <el-breadcrumb separator="/">
                                <el-breadcrumb-item><a href="/admin/">首页</a></el-breadcrumb-item>
                                <el-breadcrumb-item><a href="/admin/">控制台</a></el-breadcrumb-item>
                            </el-breadcrumb>
                        </div>
                    </el-card>
                </div>
                <div class="body">

                </div>
                <div class="tag">
                    <el-card>
                        <ul>
                            <li>
                                <div>
                                    <div class="icon" style="background-color: #dd6161">
                                        <i class="el-icon-zoom-in"></i>
                                    </div>

                                    <div>
                                        <span class="num">{{art_num}}</span>
                                        <span>文章总数</span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <div class="icon" style="background-color: #7165B9;">
                                        <i class="el-icon-magic-stick"></i>
                                    </div>

                                    <div>
                                        <span class="num">{{fri_num}}</span>
                                        <span>友链总数</span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <div class="icon" style="background-color: #1FB5E7;">
                                        <i class="el-icon-trophy"></i>
                                    </div>

                                    <div>
                                        <span class="num">{{mood_num}}</span>
                                        <span>心情总数</span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <div class="icon" style="background-color: #24C24B;">
                                        <i class="el-icon-sunny"></i>
                                    </div>

                                    <div>
                                        <span class="num">{{news_num}}</span>
                                        <span>新闻总数</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </el-card>
                </div>
            </el-main>
        </el-container>
    </el-container>
</div>

<!-- vue.js -->
<script th:src="@{/vue/vue.js}"></script>
<script th:src="@{/axios/axios.min.js}"></script>
<script th:src="@{/element-ui/js/element-ui.js}"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            art_num: 28,
            fri_num: 12,
            mood_num: 10,
            news_num: 7
        },
        methods: {
            home() {
                console.log('home');
                setTimeout(() => {
                    location.href = '/admin/';
                },1)
            },
            list() {
                console.log('list');
                setTimeout(() => {
                    location.href = '/admin/list';
                },1)
            },
            add() {
                console.log('add');
                setTimeout(() => {
                    location.href = '/admin/add';
                },1)
            },
            time() {
                console.log('add');
                setTimeout(() => {
                    location.href = '/admin/time';
                },1)
            },
            change() {
                console.log('change');
                setTimeout(() => {
                    location.href = '/';
                },1)
            },
            logout() {
                axios.get("/admin/logout").then(res => {
                    if ( res.data.code === 200) {
                        this.$message.success("注销成功");
                        localStorage.setItem("token", "No");
                        console.log(localStorage.getItem("token"));
                        setTimeout(() => {
                            location.href = '/';
                        },1500)
                    }
                })
            },
        }
    })
</script>

</body>
</html>